<!DOCTYPE html>
<html lang="es">
	<head>
		<title>Aprendiendo jQuery</title>
		<script src="jquery-1.8.3.min.js"> </script>
		<script type="text/javascript">	
		function jqefectos(){
			$(document).on('ready', function(){
				
				$('#btShow').click(function(){
					var elem = $('.jqCap16Sub1');
					elem.show();
				});
				
				$('#btHide').click(function(){
					var elem = $('.jqCap16Sub1');
					elem.hide();
				});
				
				$('#btSlideUp').click(function(){
					var elem = $('.jqCap16Sub2');
					elem.slideUp();
				});
				
				$('#btSlideDown').click(function(){
					var elem = $('.jqCap16Sub2');
					elem.slideDown();
				});
				
				$('#btFadeIn').click(function(){
					var elem = $('.jqCap16Sub3');
					elem.fadeIn();
				});
				
				$('#btFadeOut').click(function(){
					var elem = $('.jqCap16Sub3');
					elem.fadeOut();
				});
				
				$('#btSlideToggle').click(function(){
					var elem = $('.jqCap16Sub4');
					elem.slideToggle();
				});
				
				$('#btSlideToggleRet').click(function(){
					var elem = $('.jqCap16Sub4');
					elem.slideToggle(4000);
				});
			});
		}
		</script>
		<style>
		.ejemplos {
			background: #f1f1f1;
			display: block;
			height: 100px;
			margin: 25px auto;
			width: 500px;
			border-radius: 0 50px 0 50px;
			overflow: auto;
			}
		</style>
	</head>
	<body>
		<button class="change" id="btShow">Show</button>
		<button class="change" id="btHide">Hide</button>
		<div class="ejemplos jqCap16Sub1"></div>
		<button class="change" id="btSlideUp">Slide Up</button>
		<button class="change" id="btSlideDown">Slide Down</button>
		<div class="ejemplos jqCap16Sub2"></div>
		<button class="change" id="btFadeIn">Fade In</button>
		<button class="change" id="btFadeOut">Fade Out</button>
		<div class="ejemplos jqCap16Sub3"></div>
		<button class="change" id="btSlideToggle">Slide Toggle</button>
		<button class="change" id="btSlideToggleRet">Slide Toggle Retardado</button>
		<div class="ejemplos jqCap16Sub4"></div>
		
		
		<!--<script type="text/javascript" src="http://www.rfsouto.com/Scripts/capitulo12.js"></script>-->
		<script type="text/javascript">
		<!--
		jqefectos();
		//-->
		</script>
	</body>
</html>